<style scoped lang="scss"></style>
<template>
  <map :longitude="longitude" :latitude="latitude" :scale="scale" :theme="theme" :min-scale="minScale"
    :max-scale="maxScale" :layer-style="layerStyle" :markers="markersList" :polyline="polylineList"
    :circles="circlesList" :controls="controlsList" :include-points="includePoints" :z-index="zIndex"
    :enable-3D="enable3D" :show-compass="showCompass" :enable-zoom="enableZoom" :enable-scroll="enableScroll"
    :enable-rotate="enableRotate" :rotate="rotate" :skew="skew" :enable-overlooking="enableOverlooking"
    :enable-satellite="enableSatellite" :enable-traffic="enableTraffic" :enable-poi="enablePoi"
    :enable-building="enableBuilding" :show-location="showLocation" :polygons="polygonsList"
    :enable-indoor-map="enableIndoorMap" @markertap="onMarkerTap" @callouttap="onCalloutTap" @controltap="onControlTap"
    @regionchange="onRegionChange" @tap="onTap" :style="item.style"></map>
</template>
<script>
export default {
  name: 'kw-map', //文件名
  components: {}, //组件
  props: {
    item: {
      type: Object,
      default() {
        return {}
      }
    },
    // 中心经度
    longitude: {
      type: Number|String,
      default: 0
    },
    // 中心纬度
    latitude: {
      type: Number|String,
      default: 0
    },
    // 缩放级别，取值范围为3-20
    scale: {
      type: Number|String,
      default: 16
    },
    // 主题（satellite 或 normal）只在初始化时有效，不能动态变更（仅Android支持）
    theme: {
      type: String,
      default: 'normal'
    },
    // 最小缩放级别
    minScale: {
      type: Number,
      default: 3
    },
    // 最大缩放级别
    maxScale: {
      type: Number,
      default: 20
    },
    // 个性化地图
    layerStyle: {
      type: [Number, String],
      default: 1
    },
    // 标记点
    markers: {
      type: Array,
      default() {
        return []
      },
    },
    // 路线
    polyline: {
      type: Array,
      default() {
        return []
      },
    },
    // 圆
    circles: {
      type: Array,
      default() {
        return []
      },
    },
    // 控件
    controls: {
      type: Array,
      default() {
        return []
      },
    },
    // 缩放视野以包含所有给定的坐标点
    includePoints: {
      type: Array,
      default() {
        return []
      },
    },
    // 显示层级
    zIndex: {
      type: Number,
      default: 0
    },
    // 是否显示3D楼块
    enable3D: {
      type: Boolean,
      default: false
    },
    // 是否显示指南针
    showCompass: {
      type: Boolean,
      default: false
    },
    // 是否支持缩放
    enableZoom: {
      type: Boolean,
      default: true
    },
    // 是否支持拖动
    enableScroll: {
      type: Boolean,
      default: true
    },
    // 是否支持旋转
    enableRotate: {
      type: Boolean,
      default: false
    },
    // 旋转角度(范围0-360)地图正北和设备 y 轴角度的夹角
    rotate: {
      type: Number,
      default: 0
    },
    // 倾斜角度，范围 0 ~ 40 , 关于 z 轴的倾角
    skew: {
      type: Number,
      default: 0
    },
    // 是否开启俯视
    enableOverlooking: {
      type: Boolean,
      default: false
    },
    // 是否开启卫星图
    enableSatellite: {
      type: Boolean,
      default: false
    },
    // 是否开启实时路况
    enableTraffic: {
      type: Boolean,
      default: false
    },
    // 是否展示 POI 点
    enablePoi: {
      type: Boolean,
      default: false
    },
    // 是否展示建筑物
    enableBuilding: {
      type: Boolean,
      default: false
    },
    // 显示带有方向的当前定位点
    showLocation: {
      type: Boolean,
      default: false
    },
    // 多边形
    polygons: {
      type: Array,
      default() {
        return []
      },
    },
    // 是否展示室内地图
    enableIndoorMap: {
      type: Boolean,
      default: false
    },
  }, // props
  data() {
    return {
      //默认标记点配置
      defaultMarkersConfig: {
        iconPath: '/_patch/img/marker.png',
        width: 30,
        height: 30,
      },
      // 默认路线配置
      defaultPolylineConfig: {
        color: '#FF4500',
        width: 2,
        dottedLine: false,
        arrowLine: false,
        borderColor: '#FF4500',
        borderWidth: 1
      },
      // 默认圆形配置
      defaultCirclesConfig: {
        fillColor: '#FF4500',
        color: '#FF4500',
        strokeWidth: 1
      },
      // 默认控件配置
      defaultControlsConfig: {
        id: 1,
        position: {
          left: 0,
          top: 0,
          width: 50,
          height: 50
        },
        iconPath: '/_patch/img/control.png',
        clickable: true
      },
      //默认多边形配置
      defaultPolygonsConfig: {
        strokeColor: '#FF4500',
        fillColor: '#FF4500',
        strokeWidth: 1
      },

      // 标记点列表
      markersList: [],
      // 路线列表
      polylineList: [],
      // 圆形列表
      circlesList: [],
      // 控件列表
      controlsList: [],
      // 多边形列表
      polygonsList: []
    }
  },
  computed: {}, // 监听属性 类似于data概念
  watch: {
    markers: {
      handler() {
        console.log('设置标记点')
        this.setMarkers()
      },
      deep: true,
      immediate: true
    },
    polyline: {
      handler() {
        this.setPolyline()
      },
      deep: true,
      immediate: true
    },
    circles: {
      handler() {
        this.setCircles()
      },
      deep: true,
      immediate: true
    },
    controls: {
      handler() {
        this.setControls()
      },
      deep: true,
      immediate: true
    },
    polygons: {
      handler() {
        this.setPolygons()
      },
      deep: true,
      immediate: true
    }
  }, // 监控data中的数据变化
  created() {
  }, // 生命周期 - 创建完成（可以访问当前this实例）
  mounted() {
  }, // 生命周期 - 挂载完成（可以访问DOM元素）
  // 方法集合
  methods: {
    // 设置标记点
    setMarkers() {
      this.markersList = []
      this.$nextTick(() => {
        // 遍历标记点
        this.markers.forEach(item => {
          //定义原始标记点对象
          let marker = {
            id: item.id,
            latitude: item.纬度*1 || 0,
            longitude: item.经度*1 || 0,
            width: item.标记点宽度*1 || this.defaultMarkersConfig.width,
            height: item.标记点高度*1 || this.defaultMarkersConfig.height,
            iconPath: this.defaultMarkersConfig.iconPath,
            callout: {
              content: item.气泡窗口?.内容,
              color: item.气泡窗口?.颜色,
              fontSize: item.气泡窗口?.字体大小,
              borderRadius: item.气泡窗口?.边框圆角,
              bgColor: item.气泡窗口?.背景颜色,
              padding: item.气泡窗口?.文本边缘留白,
              display: item.气泡窗口?.显示方式 || 'ALWAYS',
            }
          }
          this.markersList.push(marker)
        })
      })
      console.log(this.markersList,'222')
    },
    // 设置路线
    setPolyline() {
      this.polylineList = []
      this.$nextTick(() => {
        this.polyline.forEach(item => {
          const points = []
          try {
            item.经纬度列表?.forEach(item => {
              points.push({
                latitude: item.纬度*1 || 0,
                longitude: item.经度*1 || 0,
              })
            })
          } catch (e) {
            console.error(e, 'polyline.经纬度列表')
          }
          let polyline = {
            points: points || [],
            color: item.颜色 || this.defaultPolylineConfig.color,
            width: item.宽度 || this.defaultPolylineConfig.width,
            dottedLine: item.是否虚线 || this.defaultPolylineConfig.dottedLine,
            arrowLine: item.箭头 || this.defaultPolylineConfig.arrowLine,
            borderColor: item.边框颜色 || this.defaultPolylineConfig.borderColor,
            borderWidth: item.边框宽度 || this.defaultPolylineConfig.borderWidth
          }
          this.polylineList.push(polyline)
        })
      })
    },
    // 设置圆形
    setCircles() {
      this.circlesList = []
      this.$nextTick(() => {
        this.circles.forEach(item => {
          let circle = {
            latitude: item.纬度*1 || 0,
            longitude: item.经度*1 || 0,
            color: item.颜色 || this.defaultCirclesConfig.color,
            fillColor: item.填充颜色 || this.defaultCirclesConfig.fillColor,
            radius: item.半径 || 0,
            strokeWidth: item.边框宽度 || this.defaultCirclesConfig.strokeWidth
          }
          this.circlesList.push(circle)
        })
      })
    },
    // 设置控件
    setControls() {
      this.controlsList = []
      this.$nextTick(() => {
        this.controls.forEach(item => {
          let control = {
            id: item.id || this.defaultControlsConfig.id,
            position: {
              left: item.位置?.左边距 || this.defaultControlsConfig.position.left,
              top: item.位置?.顶边距 || this.defaultControlsConfig.position.top,
              width: item.位置?.宽度 || this.defaultControlsConfig.position.width,
              height: item.位置?.高度 || this.defaultControlsConfig.position.height
            },
            iconPath: item.图标路径 || this.defaultControlsConfig.iconPath,
            clickable: item.可点击 || this.defaultControlsConfig.clickable
          }
          this.controlsList.push(control)
        })
      })
    },
    // 设置多边形
    setPolygons(){
      this.polylineList = []
      this.$nextTick(() => {
        this.polygons.forEach(item => {
          const points = []
          try {
            item.经纬度列表?.forEach(item => {
              points.push({
                latitude: item.纬度*1 || 0,
                longitude: item.经度*1 || 0,
              })
            })
          } catch (e) {
            console.error(e, 'polyline.经纬度列表')
          }
          let polygon = {
            points: points || [],
            strokeWidth: item.描边的宽度 || this.defaultPolygonsConfig.strokeWidth,
            strokeColor: item.描边的颜色 || this.defaultPolygonsConfig.strokeColor,
            fillColor: item.填充颜色 || this.defaultPolygonsConfig.fillColor,
            zIndex: item.多边形Z轴数值
          }
          this.polygonsList.push(polygon)
        })
      })
    },
    // 点击标记点时触发
    onMarkerTap(e) {
      let item = this.markers.find(item => item.id == e.target.markerId)
      this.$emit('markertap', item)
    },
    // 点击标记点对应的气泡时触发
    onCalloutTap(e) {
      this.$emit('callouttap', e)
    },
    // 点击控件时触发
    onControlTap(e) {
      this.$emit('controltap', e)
    },
    // 视野发生变化时触发
    onRegionChange(e) {
      this.$emit('regionchange', e)
    },
    // 点击地图时触发
    onTap(e) {
      this.$emit('tap', e)
      this.$emit('itemClick', this.item)
    }
  },
  beforeCreate() {
  }, // 生命周期 - 创建之前
  beforeMount() {
  }, // 生命周期 - 挂载之前
  beforeUpdate() {
  }, // 生命周期 - 更新之前
  updated() {
  }, // 生命周期 - 更新之后
  beforeDestroy() {
  }, // 生命周期 - 销毁之前
  destroyed() {
  }, // 生命周期 - 销毁完成
  activated() {
  }, // 如果页面有keep-alive缓存功能，这个函数会触发

}
</script>
